<template>
  <div class="repairmanDetail">
    <div class="headCrm">
        <p class="billHead">
          <span class="el-icon-arrow-left" @click="returnPage"></span>
          <span class="headFont">维修详情</span>
        </p>
    </div>  
    <div class = "contentCrm">
      <div class="repairmanDetailList">
          <ul>
              <li><p>工单号</p>
                  <span>{{repairmanDetail.code || '--'}}</span>
              </li>
              <li>
                <p>客户名称</p>
                <span>{{repairmanDetail.customerName || '--'}}</span>
              </li>
              <li>
                <p>联系电话</p>
                <span>{{repairmanDetail.contactPhone || '--'}}</span>  
              </li>
              <li>
                <p>商品名称</p>
                <span>{{repairmanDetail.productName || '--'}}</span>
              </li>
              <div class="detil-history">
                <button class="a mlcfont">详情</button>
                <button class="b" @click="detailhistorybut">历史</button>
              </div>
              <li>
                <p>品牌</p>
                <span>{{repairmanDetail.brandName || '--'}}</span>
              </li>
              <!-- <li>
                <p>型号</p>
                <span>{{repairmanDetail.memberName}}</span>
              </li> -->
              <li>
                <p>序列号</p>
                <span>{{repairmanDetail.serialNumber || '--'}}</span>
              </li>
              <li>
                <p>送修日期</p>
                <span>{{repairmanDetail.sysCreatedTimeName || '--'}}</span>
              </li>
              <li>
                <p>客诉故障</p>
                <span class="descrip">{{repairmanDetail.description || '--'}}</span>
              </li>
              <li>
                <p>故障说明</p>
                <span>{{repairmanDetail.reasonName || '--'}}</span>
              </li>                                   
              <li>
                <p>是否保修内</p>
                <el-form ref="form" :model="repairmanDetail" label-width="1rem" class="but-switch" disabled>
                  <el-form-item label="">
                    <el-switch v-model="repairmanDetail.isGuaranteed"></el-switch>
                  </el-form-item>
                </el-form> 
              </li>
              <li>
                <p>人工费</p>
                <span>￥{{repairmanDetail.labourPrice || '--'}}</span>
              </li>
              <li>
                <p>上门费</p>
                <span>￥{{repairmanDetail.doorPrice || '--'}}</span>
              </li>
              <li>
                <p>总费用</p>
                <span>￥{{repairmanDetail.totalPrice || '--'}}</span>
              </li>              
          </ul>
      </div>
    </div>
    <div class = "footCrm-repair">
      <div>
          <button  class="but-end" @click="end(repairmanDetail.customerName,repairmanDetail.tasktypeName,repairmanDetail.tasktypeId)">完工</button>
          <button  class="but-run" @click="follow">写跟进</button>
      </div>
        
    </div>
  </div>


</template>

<script>
export default {
  name: 'repairmanDetail',
  data() {
    return {
      repairmanDetail: {
        // billcode: '1',
        // customer: 'mhy',
        // customerPhone: '13301938199',
        // goods: '锤子',
        // faultDescription: '锤子锤鸡蛋，为什么锤不烂,为什么?为什么?为什么?为什么?为什么?为什么?为什么?为什么?',
        // serviceType: '维修',
        // memberName: 'lss',
        // memberPhone: '15005788777',
      },
    };
  },
  mounted: function(){
    // this.loading = true;
    let _this = this;
    this.$fetch(this.$root.domainIp+'maintain/apporder/'+localStorage.getItem("detailId"))
    .then((response) => {
        // this.loading = false;
        if(response.code == 0){
            let json_data = JSON.parse(this.decrypt(response.data));
            _this.repairmanDetail = json_data;
            console.log(this.repairmanDetail )
        }else {
            _this.$message({
                message:(response.message || '请检查网络是否连接'),
                center: true
            });
        }
    }).catch(function (error) {
        // this.loading = false;
        console.log(error);
        _this.$message({
            message:('请检查网络是否连接'),
            center: true
        });
    });
  },
  methods: {
    handleClick: function(tab, event) {
      // console.log(tab, event);
    },
    returnPage:function(){
          console.log('returnPage')
          this.$router.push({
            path:'/repairman'
          })  
    },
    detailhistorybut:function(){
        this.detailHistory=false;
            this.$router.push({
            path:'/repairmanHistory'
          })  
        console.log('detailhistorybut:'+this.detailHistory)
    },
    end:function(name,status,statusId){
      localStorage.setItem("customerName",name);
      localStorage.setItem("tasktypeName",status);
      localStorage.setItem("tasktypeId",statusId);
      this.$router.push({
      path:'/repairmanEnd'
      })               
    },
    follow:function(){
      this.$router.push({
      path:'/repairmanFollow'
      })               
    },
  },
};
</script>

<style>
/* headCrm */
  .repairmanDetail .headCrm{
    width:100%;
    background: #ff5000;
    position:fixed;
    top:0%;
    color:#fff;  
    z-index: 99;
  }
  .repairmanDetail .billHead{
    text-align:center;
    font-size: 0.33rem; 
    padding:0.33rem 0; 
    clear: none; 
  }
  .repairmanDetail  .el-icon-arrow-left{
    position:absolute;
    left: 0.3rem;
    top:0.2rem;
    font-size: 0.6rem;
  }


  /* contentCrm */
  .repairmanDetail .contentCrm{
    /* font-size: 0.3rem; */
    width: 90%;
    margin-left: 5%;
    /* padding-top: 4%; */
    margin-top:13%;
    color:#646464; 
  }
  .repairmanDetail .detailhistory-col{
    color: #ff5000;
  }
  .repairmanDetail .contentCrm p {
    font-size: 0.3rem;
  }
  .repairmanDetail .text {
    font-size: 0.3rem;
  }

  .repairmanDetail .repairmanDetailList ul li p{
      width:25%;
      /* float: left; */
      color: #646464;
      display:inline-block;
  }
  .repairmanDetail .repairmanDetailList ul li span{
    float: right;
    /* color: #333333; */
  }
  .repairmanDetail .repairmanDetailList ul li {
    /* margin: 0.44rem 0rem; */
    /* padding: 0.16rem 0; */
    padding-top: 0.55rem;
    /* display:inline-block; */
    /* width: 60%; */
  }
  .repairmanDetail .repairmanDetailList ul {
    margin: 0rem 0rem 2rem 0rem;
    font-size: 0.33rem;
    /* height: 50rem; */
  }

  .repairmanDetail .afult{
    color:#ff5000;
    margin-bottom: 0.2rem;
  }
  .repairmanDetail .afultText{
    line-height: 0.55rem;
  }
  /* 交换按钮 */
  .repairmanDetail .but-switch{
    height: 0.3rem;
    float: right;
  }
  .repairmanDetail .el-form-item{
    height: 0.33rem;
    margin:0rem;
  }
  .repairmanDetail .el-form-item__content{
    line-height:0.33rem;
    font-size:0.33rem;
  }

  .repairmanDetail .detil-history .a,.detil-history .b{
      border:0.01rem solid #E6E6E6;  
      width: 49%;
      height: 0.7rem;
      display:inline-block;
      text-align:center;
      margin-top: 0.6rem;
      line-height:0.7rem;
      background-color: #ffffff;
  }
  .repairmanDetail .detil-history .a{
    float: left;
  }
  .repairmanDetail .descrip{
    line-height: 0.55rem;
    padding: 0.15rem 0;
  }

/* footCrm */
  div.footCrm-repair{
    width: 100%;
    height: 0.8rem;
    background-color:#E6E6E6;
    position:fixed;
    bottom:0%;
  }
  .but-end,.but-run{
    width: 1.33rem;
    height: 0.6rem;
    background-color: #ffffff;
    margin: 0.1rem 0;
    border:0.05rem solid #E6E6E6;    

  }
  .but-end{
    margin-left:3.5rem;

  }
  .but-run{
    margin-left:0.7rem;
  }

</style>
